<template>
	<view class="content">
		<view class="card">
			<view class="item" v-for="(item, index) in data.address" :key="item.id">
				<view class="top">
					<view class="radio">
						<radio-group>
							<radio :value="item.id.toString()" shape="square" label="" :checked="item.id === current" @click="useWhy(item)"></radio>
						</radio-group>
					</view>
					<view class="name">{{ item.name }}</view>

					<view class="phone">{{ item.phone_number }}</view>
				</view>
				<view class="bottom">
					{{ item.address }}
					<up-icon name="trash" :size="30" color="#999999" @click="deleteAddress(item)"></up-icon>
				</view>
			</view>
		</view>
		<view class="addSite">
			<view class="addSite_btn">
				<view class="add" @click="useAddress">
					<up-icon name="checkbox-mark" color="#ffffff" class="icon" :size="30"></up-icon>
					使用该地址
				</view>
				<navigator url="/pages/addAddress/addAddress">
					<view class="add">
						<up-icon name="plus" color="#ffffff" class="icon" :size="30"></up-icon>
						新建收货地址
					</view>
				</navigator>
			</view>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { onMounted, reactive, watch, watchEffect, ref } from 'vue';
import { GetCustomersAddress, DeleteCustomersAddress, AddCustomersAddressInUser, GetUserFromId } from '../../apis/api.js';
import useCartStore from '../../store/index.js';

const data = reactive({
	address: '',
	user_id: []
});

const current = ref(0);

const uToastRef = ref(null);
const toast = reactive({
	type: '',
	message: ''
});

const addressStore = useCartStore();

// 获取收货人地址信息
watch(() => {
	uni.getStorage({
		key: 'userId',
		success: async (res) => {
			data.user_id = res.data;
			console.log('获取的 userId 为：', data.user_id);
			await GetCustomersAddress(data.user_id).then((res) => {
				if (res.msgType == 8000) {
					console.log(res);
					data.address = res.data;
				}
			});
		},
		fail: (error) => {
			console.error('获取 userId 失败：', error);
		}
	});
});

// 删除收获地址
const deleteAddress = (item) => {
	watchEffect(() => {
		console.log(item.id);
		uni.showModal({
			title: '确认删除',
			content: '确定要删除选中的商品吗？',
			success: function (res) {
				if (res.confirm) {
					// 用户点击确定执行删除操作
					// 获取要删除的商品的 ID
					DeleteCustomersAddress({
						id: item.id
					}).then((res) => {
						// 删除成功后更新数据
						console.log(res);
						if (res.msgType == 8000) {
							toast.type = 'success';
							toast.message = res.msg;
							uToastRef.value.show({ type: toast.type, message: toast.message, duration: 300 });
							console.log(data.user_id);
							GetCustomersAddress(data.user_id).then((res) => {
								if (res.msgType == 8000) {
									console.log(res);
									data.address = res.data;
								}
							});
						} else {
							toast.type = 'error';
							toast.message = res.msg;
							uToastRef.value.show({ type: toast.type, message: toast.message, duration: 300 });
						}
					});
				}
			}
		});
	});
};

// 选项
const useWhy = (item) => {
	console.log(item);
	current.value = item.id;
	console.log(current.value);
};

// 选中该地址为收获地址
const useAddress = () => {
	console.log(current.value);
	if (current.value) {
		AddCustomersAddressInUser({
			address_id: current.value,
			user_id: data.user_id
		}).then((res) => {
			console.log(res);
			if (res.msgType == 8000) {
				toast.type = 'success';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message, duration: 500 });
				addressStore.initAddressId(data.user_id);
			} else {
				toast.type = 'error';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message, duration: 500 });
			}
		});
	} else {
		toast.type = 'error';
		toast.message = '请勾选';
		uToastRef.value.show({ type: toast.type, message: toast.message, duration: 500 });
	}
};
</script>

<style lang="less" scoped>
.content {
	height: 100vh;
}
.card {
	padding-bottom: 50px;
}
.addSite {
	display: flex;
	// flex-direction: column;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: fixed;
	bottom: 30rpx;
	left: 80rpx;
	background-color: red;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add {
		display: flex;
		align-items: center;
		color: #ffffff;
		padding: 10rpx;
		.icon {
			margin-right: 10rpx;
		}
	}
	.addSite_btn {
		display: flex;
		// justify-content: space-around;
		// align-items: center;
	}
}
.item {
	padding: 40rpx 20rpx;
	overflow: auto;

	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
		.tag {
			display: flex;
			font-weight: normal;
			align-items: center;
			text {
				display: block;
				width: 60rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color: rgb(49, 145, 253);
			}
			.red {
				background-color: red;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
</style>
